<script setup>
import { ref } from 'vue'
defineProps({
  todos: Array,
})

const emit = defineEmits(['removeTodo'])

function removeTodo(todo) {
  emit('removeTodo',todo)
}

</script>

<template>
  <ul>
    <li v-for="todo in todos" :key="todo.id">
      <input type="checkbox" v-model="todo.done">
      <span :class="{ done: todo.done }">{{ todo.text }}</span>
      <button @click="removeTodo(todo)">X</button>
    </li>
  </ul>
</template>

<style scoped>
.done {
  text-decoration: line-through;
}
</style>
